<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <span style="color:gray; font-size:13px">时间: </span>
      <el-date-picker v-model="transactionQuery.timeInterval" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" align="right">
      </el-date-picker>
      <el-select size="mini" v-model="transactionQuery.type" clearable placeholder="支付方式">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input clearable class="filter-item" size="mini" style="width: 200px; margin-top: 8px;" placeholder="请输入用户姓名" v-model="transactionQuery.nickname">
      </el-input><br/>
      <el-input clearable class="filter-item" size="mini" style="width: 192px; margin-top: 8px;margin-left: 33px" placeholder="请输入机构名称" v-model="transactionQuery.name">
      </el-input>
      <el-select size="mini" v-model="transactionQuery.payType" clearable placeholder="充值途径" style="margin-left: 1.5%">
        <el-option v-for="item in payOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select size="mini" v-model="transactionQuery.mechanismId" clearable placeholder="充值方式">
        <el-option v-for="item in payAreaOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input clearable class="filter-item" size="mini" style="width: 200px; margin-top: 8px;" placeholder="请输入用户id" v-model="transactionQuery.userId">
      </el-input><br />
      <el-input clearable class="filter-item" size="mini" style="width: 192px; margin-top: 8px;margin-left: 33px" placeholder="手机号码" v-model="transactionQuery.phone">
      </el-input><br />
      <span style="color:gray; font-size:13px"> 机构支付时间: </span>
      <el-date-picker v-model="transactionQuery.timeIntervalOrganization" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" align="right">
      </el-date-picker>

      <el-button class="filter-item" style="margin-top: 10px;margin-left: 47px" type="primary" size="mini" icon="el-icon-search" @click="getList">查找</el-button>
      <el-button class="filter-item" style="margin-top: 10px" type="primary" size="mini" icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">导出</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column   align="center" label="时间" prop="modifyTime">
      </el-table-column>

      <el-table-column  align="center" label="姓名" prop="nickname">
      </el-table-column>

      <el-table-column   align="center" label="支付方式" prop="type" :formatter="formatRoleType">
      </el-table-column>

      <el-table-column   align="center" label="单号" prop="recordSn">
      </el-table-column>

      <el-table-column   align="center" label="积分金额" prop="modifyIntegral">
      </el-table-column>

      <el-table-column   align="center" label="爱币金额" prop="modifyAmount">
      </el-table-column>

      <el-table-column   align="center" label="备注" prop="modifyReason">
      </el-table-column>

      <el-table-column  align="center" label="机构名称" prop="name">
      </el-table-column>

      <el-table-column  align="center" label="机构充值实收" prop="actualPayment">
      </el-table-column>

      <el-table-column   align="center" label="机构充值途径" prop="payType" :formatter="formatRolePayType">
      </el-table-column>

      <el-table-column  align="center" label="机构支付单号" prop="payId">
      </el-table-column>

      <el-table-column   align="center" label="机构支付时间" prop="payTime">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="transactionQuery.page" :page-sizes="[10,20,30,50]" :page-size="transactionQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>

<script>
import { statReport, statExport } from '@/api/stat'
import { uploadPath } from '@/api/storage'

export default {
  name: 'report',
  data() {
    return {
      uploadPath,
      options: [
        {
          value: '1',
          label: '充值'
        },
        {
          value: '2',
          label: '支出'
        },
        {
          value: '3',
          label: '兑换'
        },
        {
          value: '4',
          label: '退款'
        },
        {
          value: '5',
          label: '返赠'
        },
        {
          value: '6',
          label: '机构购买'
        }
      ],
      payOptions: [
        {
          value: '1',
          label: '支付宝'
        },
        {
          value: '2',
          label: '微信'
        },
        {
          value: '3',
          label: '其他'
        },
        {
          value: '4',
          label: '爱币支付'
        }
      ],
      payAreaOptions: [
        {
          value: '1',
          label: '个人充值'
        },
        {
          value: '2',
          label: '机构充值'
        }
      ],
      value: '',
      downloadLoading: false,
      transactionQuery: {
        timeInterval: [
          new Date().setHours(0, 0, 0, 0),
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000)
        ],
        type: undefined,
        payType: undefined,
        mechanismId: undefined,
        userId: undefined,
        phone: undefined,
        name: undefined,
        timeIntervalOrganization: undefined,
        nickname: undefined,
        page: 1,
        limit: 20,
        sort: '+id'
      },
      list: null,
      total: undefined,
      listLoading: true,
      pickerOptions: {
        shortcuts: [
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '前天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatRoleType: function(row, column) {
      return row.type === 1
        ? '充值'
        : row.type === 2
          ? '支出'
          : row.type === 3
            ? '兑换'
            : row.type === 4
              ? '退款'
              : row.type === 5
                ? '返赠'
                : row.type === 6
                  ? '机构购买'
                  : '其他'
    },
    formatRolePayType: function(row, column) {
      return row.payType === 1 ? '支付宝' : row.payType === 2 ? '微信' : row.payType === 3 ? '其他' : row.payType === 4 ? '爱币支付' : '其他'
    },
    getList() {
      this.listLoading = true
      statReport(this.transactionQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.transactionQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.transactionQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.transactionQuery.page = val
      this.getList()
    },
    handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        statExport(this.transactionQuery).then(response => {
          const tHeader = [
            '时间',
            '姓名',
            '支付方式',
            '单号',
            '积分金额',
            '爱币金额',
            '备注',
            '机构名称',
            '机构充值实收',
            '机构充值途径',
            '机构支付单号',
            '机构支付时间'
          ]
          const filterVal = [
            'modifyTime',
            'nickname',
            'type',
            'recordSn',
            'modifyIntegral',
            'modifyAmount',
            'modifyReason',
            'name',
            'actualPayment',
            'payType',
            'payId',
            'payTime'
          ]
          const list = response.data.data.items
          for (var i = 0; i < list.length; i++) {
            if (list[i].type === 1) {
              list[i].type = '充值'
            } else if (list[i].type === 2) {
              list[i].type = '支出'
            } else if (list[i].type === 3) {
              list[i].type = '兑换'
            } else if (list[i].type === 4) {
              list[i].type = '退款'
            } else if (list[i].type === 5) {
              list[i].type = '返赠'
            } else if (list[i].type === 6) {
              list[i].type = '机构购买'
            }

            if (list[i].payType === 1) {
              list[i].payType = '支付宝'
            } else if (list[i].payType === 2) {
              list[i].payType = '微信'
            } else if (list[i].payType === 3) {
              list[i].payType = '其他'
            } else if (list[i].payType === 4) {
              list[i].payType = '爱币支付'
            } else {
              list[i].payType = '其他'
            }
          }
          excel.export_json_to_excel2(tHeader, list, filterVal, '综合查询')
          this.downloadLoading = false
        })
      })
    }
  }
}
</script>
